<template>
    <div class="mainItem">
        <div class="boxmock" v-loading="loading" v-if="loading" :class="loading ? 'blurView' : ''"></div>
        <div class="mainItem-head">药品数据分析</div>

        <div class="cardV">
            <el-carousel height="90px" indicator-position="none" :autoplay="true" :interval="5000" :loop="true"
                @change="changeCarousel">
                <el-carousel-item v-for="(i, o) in xdata" :key="o">
                    <div class="sw">
                        <OrbitSpinner></OrbitSpinner>
                        <div class="swn">{{ i }}</div>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <div class="liquidfill" ref="liquidfill"></div>
        </div>

        <div class="chartV">
            <div id="ml2V" ref="ml2V"></div>
        </div>

        <img class="mainItem-footer" src="@/assets/l.png" alt="">
    </div>
</template>

<script>
import { fetchGet } from '@/api/request'
import OrbitSpinner from './loadComponents/OrbitSpinner.vue'
export default {
    props: ['hIndex', 'dIndex'],
    components: { OrbitSpinner },
    data() {
        return {
            loading: false,
            ml2V: null,
            sData: [22, 252, 473, 156, 83, 278, 15, 112, 35, 643, 216],
            allNum: 2214,
            xdata: ['0.3mg氯雷他定氯雷他他定氯雷他他定氯雷他定', '0.25mg对乙酰氨基酚', '0.1mg头孢克圬', '甲磺酸奥希替尼', '次氯酸钠', '辅酶Q10', '阿替利珠单抗注射液', '度伐利尤单抗注射液', '盐酸阿来替尼胶囊', '甲磺酸阿美替尼片', '盐酸安罗替尼胶'],
            liquidfill: null,
            swIndex: 0,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.ml2V = this.$echarts.init(this.$refs.ml2V);
            this.liquidfill = this.$echarts.init(this.$refs.liquidfill);
            this.chartInit();
            this.bollsInit();
        });
    },
    watch: {
        hIndex: function (infoData) {
            this.bollsInit();
            this.chartInit();
        },
        dIndex: function (infoData) {
            this.bollsInit();
            this.chartInit();
        },
    },
    methods: {
        changeCarousel(index) {
            this.swIndex = index;
            this.bollsInit();
        },
        bollsInit() {
            let _data = {
                series: [{
                    type: 'liquidFill',
                    data: [this.sData[this.swIndex] / this.allNum],
                    backgroundStyle: {
                        color: '#00000000'
                    },
                    radius: '95%',
                    color: ['#d5628a', '#9769dd'],
                    label: {
                        show: true,
                        color: '#fff',
                        insideColor: '#fff',
                        fontFamily: 'PMZD',
                        fontWeight: 300,
                        fontSize: 14,
                        textShadow: '0 0 8px #000',
                        align: 'center',
                        baseline: 'middle',
                        formatter: function (params) {
                            return (params.value * 100).toFixed(2) + '%'
                        },
                    },
                    outline: {
                        borderDistance: 2,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#d5628a',
                            shadowBlur: 10,
                            shadowColor: 'rgba(255, 0, 0, 1)'
                        }
                    }
                }]
            }
            this.liquidfill.setOption(_data)
        },
        chartInit() {
            this.loading = true;
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '3%',
                    left: '3%',
                    right: '5%',
                    bottom: '15%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                    },
                    {
                        left: '2%',
                        width: '95%',
                        bottom: 10,
                        height: 15,
                        type: 'slider',
                    },
                ],
                xAxis: {
                    type: 'category',
                    data: this.xdata,
                    axisLine: {
                        lineStyle: {
                            color: "#cccccccc",
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#eeeeee55",
                        }
                    },
                    axisLabel: {
                        interval: false,
                        width: 80,
                        align: 'center',
                        color: '#fff',
                        fontSize: 10,
                        width: 30,
                        overflow: 'truncate'
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#eeeeee55",

                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        barWidth: '10',
                        type: 'bar',
                        itemStyle: {
                            barBorderRadius: [10, 10, 0, 0],
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#ff6d87' },
                                    { offset: 1, color: '#797de1' }
                                ]
                            )
                        },
                        data: this.sData
                    },
                ]
            };

            this.ml2V.setOption(option)
            this.loading = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.mainItem {
    width: 400px;
    height: 400px;

    .cardV {
        height: 70px;
        width: 380px;
        position: absolute;
        top: 20px;
        left: 20px;
        padding: 10px 0;

        .sw {
            border-radius: 20px;
            box-shadow: 0 0 12px #000;
            height: 70px;
            width: 340px;
            margin-top: 10px;
            background: linear-gradient(to right, #d5628a, #9769dd);
            display: flex;
            align-items: center;
            padding-left: 20px;

            .swn {
                margin-left: 10px;
                width: 200px;
                color: #fff;
                font-size: 22px;
                font-family: 'SJYHJT';
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;

            }
        }

        .liquidfill {
            width: 60px;
            height: 60px;
            position: absolute;
            right: 40px;
            top: 25px;
            z-index: 6;
        }
    }

    .chartV {
        height: 260px;
        width: 400px;
        position: absolute;
        top: 130px;
        left: 0;

        #ml2V {
            width: 100%;
            height: 100%;
        }

    }
}
</style>